<script setup>
// 第三方模块
import { useRoute, useRouter } from "vue-router";
import { computed, reactive, ref } from "vue";

// 导入组件
import ShopInfo from "@/components/home/ShopInfo.vue";
import Product from "@/components/shop/Product.vue";
import CartBotton from "@/components/cart/CartBotton.vue";

// 导入仓库
import useShopStore from "@/stores/shop.js";
// import useCartStore from "@/stores/cart.js";

// 使用仓库
const shopStore = useShopStore();
// const cartStore = useCartStore();

/**
 * 商店信息
 */
let props = defineProps(["id"]); // 获取id
// 定义响应式对象
const shopInfo = reactive({});
// 筛选
shopInfo.value = shopStore.nearByList.find((item) => item.id == props.id);

console.log(shopInfo.value.category);

// 获取当前分类
const curCate = ref(0);
const getCurCate = (id) => {
  curCate.value = id;
};

/**
 * 商品列表
 */
//  获取全部列表
const list = computed(() => {
  // 定义数组
  let arr = [];

  if (curCate.value === 0) {
    // 全部商品
    shopInfo.value.category.forEach((item) => {
      //如何合并    解构 拼接
      arr = [...arr, ...item.list];
    });
    // 返回全部商品
    return arr;
  } else {
    // 条件返回商品
    return (arr = shopInfo.value.category.find(
      (item) => item.id === curCate.value
    ).list);
  }
});

// console.log(props.name);

//返回
const router = useRouter();
const back = () => {
  // 利用路由规则跳转
  router.go(-1);
};
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="back">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input
          type="text"
          class="search_content_input"
          placeholder="请输入商品名称"
        />
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <!-- shopInfo 传过去需要加value 因为那边接收的是对象 -->
      <ShopInfo :shopInfo="shopInfo.value" />
      <!-- 商店组件商店组件商店组件 -->
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <!-- 条件传值 -->
        <div
          class="category_item"
          :class="{ 'category_item--active': curCate === 0 }"
          @click="getCurCate(0)"
        >
          全部商品
        </div>
        <div
          class="category_item"
          :class="{ 'category_item--active': curCate === item.id }"
          v-for="item in shopInfo.value.category"
          :key="item.id"
          @click="getCurCate(item.id)"
        >
          {{ item.name }}
        </div>
        <!-- <div class="category_item">水果</div> -->
      </div>
      <div class="product">
        <!-- {{ list }} -->
        <!-- <div>商品组件商品组件商品组件</div> -->
        <div v-for="item in list" :key="item.id">
          <Product :product="item" :shopName="shopInfo.value.name" />
        </div>
      </div>
    </div>
    <!-- 购物车底部 -->
    <CartBotton :shopName="shopInfo.value.name" />
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
  //搜索
  .search {
    margin: 0.18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: 0.24rem;
      margin-right: 0.08rem;
      color: #b6b6b6;
    }
    &_content {
      flex: 1;
      height: 0.32rem;
      background-color: #f5f5f5;
      border-radius: 0.16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 0.12rem;
      }
      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: 0.32rem;
      }
    }
  }
  //商店信息
  .shop_info {
    margin: 0 0.18rem;
  }
  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: 0.5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: 0.78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: 0.4rem;
        font-size: 0.14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }
    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>